<template>
  <div class="card-layout-box" @click="router.push({path: '/main/homework'})">
    <div class="layout-left flex-align">
      <img :src="image.zuoye" alt="">
      <div class="another-name">
                          <span class="lable-type">
                            作业
                          </span>
      </div>
    </div>

    <div class="layout-right flex-baseline">
      <div class="layout-right-info">
        <h6 class="info-title">
          {{ work.name }}
        </h6>
        <p class="learning-state">
          <span v-if="!work.published">未发布</span>
          <span v-else>已发布</span>
          <span style="margin-left: 5px; border-left: 1px solid #e7ebf0; padding-left: 5px">{{ work.type === 0 ? '个人作业' : '多人作业' }}</span>
        </p>
      </div>

      <div class="layout-right-functional">
        <div style="display: flex; flex-direction: column;
          align-items: center; width: 72px; height: 60px; border-right: 1px solid #ececec;}" @click.stop="() => {handlePublish(work.id)}">
          <img :src="image.send" alt="" width="24px" height="24px">
          <span>发布</span>
        </div>

        <div style="display: flex; flex-direction: column;
          align-items: center; width: 72px; height: 60px;}">

          <el-dropdown placement="bottom" trigger="click" @click.stop="">
            <div style="display: flex; flex-direction: column;
          align-items: center; width: 72px; height: 60px;}" @click.stop="">
              <img :src="image.more" alt="" width="24px" height="24px">
              <span>更多</span>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>
                  编辑
                </el-dropdown-item>
                <el-dropdown-item>
                  <span @click.stop="() => {handleDelete(work.id)}">删除</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>

import {image} from "../../../../../assets/index.js";
import {useRouter} from "vue-router";
import userStore from "../../../../../stores/user.js";
import {deleteWork, modifyWork} from "../../../../../api/work.js";
import {ElMessage} from "element-plus";
import {onMounted} from "vue";
const router = useRouter()
const userInfo = userStore()
const emit = defineEmits(['initData'])

const props = defineProps({
  work: Object
})

onMounted(() => {
})

const handleDelete = (id) => {
  deleteWork({id: id}).then(res => {
    if (res.code === 200) {
      message('success', '删除成功')
      emit('initData')
    }
  })
}

const message = (type, text) => {
  ElMessage({
    message: text,
    type: type,
    plain: true,
  })
}

const handlePublish = (id) => {
  modifyWork({id: id, published: 1}).then(res => {
    if (res.code === 200) {
      message('success0', '发布成功')
      emit('initData')
    }
  })
}

</script>

<style scoped>
.card-layout-box {
  width: 100%;
  background: #fff;
  display: flex;
  position: relative;

  .layout-left {
    display: flex;
    flex-direction: column;
    min-width: 85px;
    margin-right: 16px;
    font-size: 12px;
    align-items: center;

    img {
      height: 40px;
      max-width: 40px;
      margin-bottom: 10px;
    }

    .another-name {
      position: relative;
      margin-top: 5px;
      line-height: 13px;
      display: inline-block;
      width: 85px;
      text-align: center;
      max-height: 31px;
      margin-bottom: 2px;
    }

    .lable-type {
      color: #3c4043;
      font-size: 13px;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 65px;
      max-height: 30px;
      line-height: 15px;
      word-break: break-all;
      display: inline-block;
      text-align: center;
    }
  }

  .layout-right {
    width: 100%;
    border-bottom: 1px solid #eee;
    padding: 0 0 4px;
    font-size: 14px;

    .layout-right-info {
      .info-title {
        font-size: 16px;
        margin-bottom: 12px;
        max-width: 500px;
        cursor: pointer;
        color: #212121;
        display: -webkit-box;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        white-space: normal;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }

      .statue-bar {
        color: #5f6368;
        font-size: 12px;
        font-style: normal;

        .el-divider .el-divider--vertical {
          font-style: normal;
          display: inline-block;
          width: 1px;
          height: 1em;
          margin: 0 8px;
          vertical-align: middle;
          position: relative;
        }
      }

      .learning-state {
        font-size: 12px;
        padding-top: 8px;
      }

      .font-color--warning {
        color: #ff941f;
      }
    }

    .layout-right-functional {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin: auto 0;
      flex: 1;
      font-size: 12px;
    }
  }
}
</style>
